
import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/base/layout_params/clip_page.dart';
import 'package:flutter_demo/pages/page_with_title.dart';

import '../../../conf/m3.dart';
import '../../../widgets/app_widgets.dart';

class PhysicalModelPage extends PageWithTitle{
  const PhysicalModelPage({super.key}):super("物理模型组件(PhysicalModel、Card、PhysicalShape)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const[
      PrimaryTitle("简介"),
      BodyText("本组件通过阴影来实现类似拥有物理实体的组件，"),
      AppSpacer.large,
      _PhysicalModelExample(),
      AppSpacer.large,
      UlItem("PhysicalModel"),
      BodyText("物理模型组件，它类似Android CardView"),
      LabelText("- color，背景色"),
      LabelText("- elevation，组件高度"),
      LabelText("- borderRadius，圆角"),
      LabelText("- shadowColor，阴影颜色，阴影大小和虚化由elevation自动计算"),
      LabelText("- shape，组件形状"),
      LabelText("- clipBehavior，裁剪行为，例如设置圆角后需要裁剪子组件避免超出卡片范围"),

      AppSpacer.large,
      _CardExample(),
      AppSpacer.large,
      UlItem("Card"),
      BodyText("来自material包的卡片组件，它默认会根据当前主题设置的样式创建卡片，当然也可以"
          "自定义阴影颜色等属性"),

      AppSpacer.large,
      _PhysicalShapeExample(),
      AppSpacer.large,
      UlItem("PhysicalShape"),
      BodyText("自定义裁剪效果并根据裁剪形状生成阴影"),
      NoticeText("Flutter已经通过ShapeBorderClipper实现了一些常用的裁剪图形，详见"),
      PageLink(ClipPage()),

    ];
  }

}

class _PhysicalModelExample extends StatelessWidget {
  const _PhysicalModelExample();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          width: 100,
          height: 100,
          child: PhysicalModel(
            color: Theme.of(context).colorScheme.primaryContainer,
            elevation: 10,
            borderRadius: M3.connerRadiusMedium,
            shadowColor: Theme.of(context).colorScheme.primary,
            child: const ColoredBox(color: Colors.transparent),
          ),
        ),
      ],
    );
  }
}

class _CardExample extends StatelessWidget {
  const _CardExample();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          width: 100,
          height: 100,
          child: Card(
            color: Theme.of(context).colorScheme.primaryContainer,
            elevation: 10,
            shape: const RoundedRectangleBorder(
              borderRadius: M3.connerRadiusMedium,
            ),
            shadowColor: Theme.of(context).colorScheme.primary,
            child: const ColoredBox(color: Colors.transparent),
          ),
        ),
      ],
    );
  }
}

class _PhysicalShapeExample extends StatelessWidget {
  const _PhysicalShapeExample();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          width: 100,
          height: 100,
          child: PhysicalShape(
            color: Theme.of(context).colorScheme.primaryContainer,
            elevation: 10,
            shadowColor: Theme.of(context).colorScheme.primary,
            clipper: const ShapeBorderClipper(shape: StarBorder(points: 5)),
            child: const ColoredBox(color: Colors.transparent),
          ),
        ),
      ],
    );
  }
}